<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Da Milk</title>

<link rel=stylesheet href='css/main.css' type='text/css' />
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<script
	src="http://www.google.com/jsapi?key=ABQIAAAAQ4VcutZ08P7TBvij8DvVmBR0FbdVKKGpLR36p2a-1juBdkpAZxSEFRtBmXIVeZf6hFr2-mwhKeql1g"></script>

<script type="text/javascript" src="js/lib/math3d.js"></script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script type="text/javascript"
	src="js/dojo/dojox/cometd.js.uncompressed.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/vehicle.js"></script>
<script type="text/javascript" src="js/simplevehicle.js"></script>
<script type="text/javascript" src="js/neighbour.js"></script>
<script type="text/javascript" src="js/slider/dhtmlxcommon.js"></script>
<script type="text/javascript" src="js/slider/dhtmlxslider.js"></script>
<script src="js/ext/dhtmlxslider_start.js"></script>
<link rel="stylesheet" type="text/css" href="css/chat.css">
<link rel="stylesheet" type="text/css" href="js/slider/dhtmlxslider.css">
<script type="text/javascript">
	var ge = null;
	var geocoder;
	var truck;
	google.load("earth", "1");
	google.load("maps", "2.99");
	function el(e) {
		return document.getElementById(e);
	}

	function Sample(description, url) {
		this.description = description;
		this.url = url;
		return this;
	}

	var samples = [];

	function init() {
		google.load("earth", "1");
		google.load("maps", "2.99");
		geocoder = new GClientGeocoder();
		google.earth.createInstance("map3d", initCallback, failureCallback);
	}

	function updateOptions() {
		var options = ge.getOptions();
		var form = document.options;

		options.setStatusBarVisibility(form.statusbar.checked);
		options.setMouseNavigationEnabled(form.mouseNav.checked);
		options.setScaleLegendVisibility(form.scaleLegend.checked);

		if (form.nav.checked) {
			ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
		} else {
			ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
		}

		if (form.berlin.checked) {
			berlinNetworkLink(true);

		} else {
			berlinNetworkLink(false);
		}
	}

	function berlinNetworkLink(enableLink) {
		var networklink = ge.createNetworkLink("");
		var link = ge.createLink("");
		link
				.setHref('http://damilk.googlecode.com/svn/trunk/client/kml/start_berlin3d.kml');
		networklink.setLink(link);
		if (enableLink == true) {
			ge.getGlobe().getFeatures().appendChild(networklink);
		} else {
			ge.getFeatures().removeChild(networklink);
		}
	}

	function initCallback(object) {
		if (ge)
			ge = null;
		ge = object;
		ge.getWindow().setVisibility(true);
		// ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);
		ge.getOptions().setFlyToSpeed(ge.SPEED_TELEPORT);

		//truck = new Truck();
		// berlinNetworkLink(true);
		updateOptions();
	}

	function run() {
		if (truck) {
			truck.selfRemove();
		}
		truck = new Truck();
	}
	function failureCallback(err) {
		/***
		 * This function will be called if plugin fails to load, in case
		 * you need to handle that error condition.
		 ***/
	}

	function submitLocation() {
		doGeocode(el('address').value);
	}

	function doGeocode(address) {
		geocoder.getLatLng(address, function(point) {
			if (point) {
				if (ge != null && truck != null) {
					truck.teleportTo(point.y, point.x);
				}
			}
		});
	}

	/**
	 * show login form
	 */
	function showLogin() {
		el("login").style.display = "inline";
		el("loggedin").style.display = "none";
	}
	/**
	 * hide login form
	 */
	function hideLogin() {
		el("login").style.display = "none";
		el("loggedin").style.display = "inline";
	}
	/**
	 * log user in and hide login form
	 */
	function logIn() {
		var result = document.loginfm.name.value.match(/\w+/);
		if (result != null) {
			room.join(result);
		} else {
			alert("Please input a valid name");
		}
	}
	/**
	 * log user out and show login form
	 */
	function logOut() {
		room.leave();
		showLogin();
	}
	function modeldisappear() {
		el("modelcars").style.display = "none";
		el("sim").style.display = "block";

	}
	function simdisappear() {
		el("sim").style.display = "none";
		el("modelcars").style.display = "block";

	}
	//Slider
	window.dhx_globalImgPath = "js/slider/imgs/"; // sets image path
</script>
</head>
<body onload='init()' onunload="GUnload()"
	onKeyDown="return keyDown(event);" onKeyUp="return keyUp(event);">

<table border="1">
	<tr>
	<th><div style="text-align: left">
<form name="loginfm"><span id="login" style="display: inline">
<input type="input" name="name" size=20><input type="Button"
	name="login" value="login" onclick="logIn();"></span> <span
	id="loggedin" style="display: none"> <input type="Button"
	name="logout" value="logout" onclick="logOut();"></span></form>
</div></th>
		<th><span style="text-decoration: underline; cursor: pointer;"
			onclick="window.open('../truckserver/ModelFetcher?searchtext='+el('searchtext').value,'Choose_a_Model','width=300,height=400,left=100,top=200,menubar=yes,resizable=yes,toolbar=yes');">
		Choose Model</span></th>
		<th>Change Model Size</th>
		<th>Change Model Heading</th>
		<th><span style="text-decoration: underline; cursor: pointer;"
			onclick="run();">Run</span></th>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td>
		<div id="slider1">
		</td>
		<td>
		<div id="slider2">
		</td>
		<td></td>
	</tr>
</table>
<script>
	//var sld = new dhtmlxSlider("slider1", 100);
	//var sld = new dhtmlxSlider(slider, 100, ball, vertical, small, big, 50, 50);
	 
	 var sld1 = new dhtmlxSlider("slider1", {
	 size:100,           
	 skin: "ball",
	 vertical:false,
	 step:50,
	 min:1,
	 max:100,
	 value:50           
	 });
	 
	sld1.init();
	//sld.setImagePath("js/slider/imgs/"); // should be used after creation of slider's object

	//occurs after slider's value was changed; 
	sld1.attachEvent("onChange", function(newValue, sliderObj) {
		var value = sld1.getValue(); // returns current slider's position

		newScale=value/100.0;
		//return value;
			//alert("New value is "+newValue);

		});
	//occurs when slider's movement ends.
	sld1.attachEvent("onSlideEnd", function(sliderValue) {
		//some code
		});
</script>
<script>
	//var sld = new dhtmlxSlider("slider2", 360);
	//var sld = new dhtmlxSlider(slider, 100, ball, vertical, small, big, 50, 50);
	 
	 var sld2 = new dhtmlxSlider("slider2", {
	 size:360,           
	 skin: "ball",
	 vertical:false,
	 step:1,
	 min:1,
	 max:360,
	 value:180           
	 });
	 
	sld2.init();
	//sld.setImagePath("js/slider/imgs/"); // should be used after creation of slider's object

	//occurs after slider's value was changed; 
	sld2.attachEvent("onChange", function(newValue, sliderObj) {
		var value = sld2.getValue(); // returns current slider's position
		//heading
		deltaH=value;
			//return value;
			//alert("New value is "+newValue);

		});
	//occurs when slider's movement ends.
	sld2.attachEvent("onSlideEnd", function(sliderValue) {
		//some code
		});
</script>
</div>
<input type="hidden" id="modelid">
<input type="hidden" id="searchtext">
<center>
<div id="sim" style="display: block">
<div class="title">
<center><i>Da Milk</i></center>
</div>

<div id="reportarea">Current Status:
<div id="report"></div>
<div id='map3d_container'>
<div id='map3d'></div>
</div>
<table>
	<tr>
		<td>To drive: use the buttons, or keyboard arrows (with focus on
		page).
		<div>
		<form name='searchform' id='searchform'
			action='javascript:submitLocation();void(0);'><input type=text
			size=60 id='address' value='(enter a location to go there)'>
		</input> <input type=submit value='Teleport!'></form>
		Presets: <input type=button value="Th' Plex"
			onclick="truck.teleportTo(37.423501,-122.086744,90);"><input
			type=button value="San Francisco"
			onclick="doGeocode('San Francisco');"><input type=button
			value="Whistler"
			onclick="truck.teleportTo(50.085734,-122.855824,220);"><input
			type=button value="Pismo"
			onclick="truck.teleportTo(35.040675,-120.629513,170);"><input
			type=button value="Tokyo"
			onclick="truck.teleportTo(35.668607,139.822026,180);"><input
			type=button value="Everest"
			onclick="truck.teleportTo(27.991283,86.924340,70);"></div>
		</td>
		<td>
		<table>
			<tr>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="gasButtonDown=true;"
					onmouseup="gasButtonDown=false;" value="gas"></td>
				<td></td>
			</tr>
			<tr>
				<td><input type=button class="button medw"
					onmousedown="leftButtonDown=true;"
					onmouseup="leftButtonDown=false;" value="left"></td>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="rightButtonDown=true;"
					onmouseup="rightButtonDown=false;" value="right"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type=button class="button medw"
					onmousedown="reverseButtonDown=true;"
					onmouseup="reverseButtonDown=false;" value="reverse"></td>
				<td></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

<div id='options_container'>
<form name="options" action='javascript:updateOptions();'><input
	type="checkbox" onclick='updateOptions()' name="statusbar" checked />Status
Bar&nbsp;&nbsp;&nbsp; <input type="checkbox" onclick='updateOptions()'
	name="mouseNav" checked />Mouse Navigation&nbsp;&nbsp;&nbsp; <input
	type="checkbox" onclick='updateOptions()' name="nav" checked />Nav
Control&nbsp;&nbsp;&nbsp; <input type="checkbox"
	onclick='updateOptions()' name="berlin" />Berlin 3D&nbsp;&nbsp;&nbsp;
<input type="checkbox" onclick='updateOptions()' name="scaleLegend"
	unckecked />Scale Legend&nbsp;&nbsp;&nbsp;</form>
</div>
</div>
</center>
</body>
</html>
